<template>
    <div class="container">
        <div class="handle-box search-box">
                <el-button
                    type="danger"
                    size='mini'
                    icon="el-icon-delete"
                    class="handle-del mr10"
                    @click="delAllSelection"
                >批量删除</el-button>
            </div>
        <el-table 
                :data="tableData" 
                ref="multipleTable"
                class="table"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column property="certificateName" align="center" label="资质名字"></el-table-column>
                <el-table-column label="开始时间" align="center" >
                    <template slot-scope="scope">{{ scope.row.startTime | formatDate}}</template>
                </el-table-column> 
                <el-table-column label="结束时间" align="center" >
                    <template slot-scope="scope">{{ scope.row.endTime | formatDate}}</template>
                </el-table-column> 
                <el-table-column label="操作" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button
                            type="primary"
                            icon="el-icon-delete"
                             size="mini"
                            @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
        </el-table>
         <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="params.page"
                    :page-size="params.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
        </div>
    </div>
</template>

<script>
import { mapGetters, mapActions, mapState, mapMutations } from "vuex";
export default {
  components: {},
  props:[],
  data() {
    return {
       params:{
          page:1,
          pageSize:10
       },
       pageTotal: 0,
       tableData:[],
       loading: true,
       //删除
       multipleSelection: [],
       delList: [],
    };
  },
  computed: {
       ...mapGetters(['getTimeOut'])
  },
  filters: {
        formatDate: function (value) {
            let date = new Date(parseInt(value) * 1000)
            let y = date.getFullYear();
            let m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let minute = date.getMinutes();
            let second = date.getSeconds();
            minute = minute < 10 ? ('0' + minute) : minute;
            second = second < 10 ? ('0' + second) : second;
            return  y + '-' + m + '-' + d 
        }
    },
  created() {

  },
  mounted() {
     this.getData()
  },
  watch: {
      
  },
  methods: {
      getData(){
           this.$axios.post('/certificate/getTimeOutRecordsPage', this.params)
            .then(res => {
                if(res.code=='200'){
                      this.tableData=res.data.certificates;
                      this.pageTotal = res.data.total;
                      this.loading=false;
                  }     
            })
      },
      // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;           
        },
        delAllSelection() {
            const length = this.multipleSelection.length;
            let str = '';
            this.delList = this.delList.concat(this.multipleSelection);
            for (let i = 0; i < length; i++) {
                str += this.multipleSelection[i].id + ',';
            }
            if(str.length == 0){
                this.$message.error('必须选择一项！');
                return
            }
            this.deleteData(str);
            this.multipleSelection = [];
        },
         // 删除操作
        handleDelete(index, row) {
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.deleteData(row.id)

                })
                .catch(() => {});
        },
        deleteData(id){
            this.$axios.get('/certificate/deleteOut',{
                params:{
                        'ids': id
                    }
                })
                .then((res) => {
                   if(res.code == "200"){
                      this.$message.success('删除成功');
                      this.getData();
                   }else{
                      this.$message.error('删除失败');
                      this.getData();
                   }           
            })
            .catch(() => {
                console.log('error submit!!');
                return false;
            });
        },
        // 触发搜索按钮
       handlePageChange(val) {
            this.$set(this.params, 'page', val);
            this.getData();
        }
  }
};
</script>

<style lang="scss" scoped>
.handle-box {
    margin-bottom: 10px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.green{
  color:green
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.green{
    color:green
}
.search-box .el-input {
  width: 150px;
}
</style>